<template>
  <!-- 添加或修改车辆备案对话框 -->
  <el-dialog :title="title" :visible.sync="dialogVisible" width="1000px" append-to-body :close-on-click-modal="false"
    @close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="right" class="flex-form"
      size="small">
      <el-form-item label="车牌号" prop="realVeNo">
        <el-input v-model.trim="form.realVeNo"  disabled placeholder="请输入车牌号" />
      </el-form-item>
      <el-form-item label="车辆海关编号" prop="veCustomsNo">
        <el-input v-model.trim="form.veCustomsNo" disabled placeholder="请输入车辆海关编号" />
      </el-form-item>

     <el-form-item label="IC卡号" prop="cardNo">
       <el-select
         v-model.trim="form.cardNo"
         filterable
         remote
         reserve-keyword
         placeholder="请输入IC卡号"
         :remote-method="remoteCardNoMethod">
         <el-option
           v-for="item in cardOptions"
           :key="item.cardNo"
           :label="item.cardNo"
           :value="item.cardNo">
         </el-option>
       </el-select>

      </el-form-item>

      <el-form-item label="电子车牌" prop="rfid">
        <el-select
          v-model.trim="form.rfid"
          filterable
          remote
          reserve-keyword
          placeholder="请输入电子车牌"
          :remote-method="remoteRfidMethod">
          <el-option
            v-for="item in rfidOptions"
            :key="item.rfid"
            :label="item.rfid"
            :value="item.rfid">
          </el-option>
        </el-select>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    getPreVehicleRecord,
    bindCard, listPreVehicleRecord
  } from "@/api/billsdecl/preVehicleRecord";
  import {findCardListByCardNo} from "@/api/billsdecl/icCardRecord";
  import {findRfidListByRfid} from "@/api/billsdecl/rfidRecord";


  export default {
    name: "PreVehicleRecord-bindCard",
    props: {
      rowData: {
        type: Object,
        default: () => {},
      },
      dict: {}
    },
    data() {
      return {
        // 弹出层
        dialogVisible: false,
        // 标题
        title: "新增",
        vehicleTypeList: [
          {label: "跨境车", value: "1"},
          {label: "提送货车", value: "2"},
         // {label: "行政车辆", value: "3"},
        ],
        //
        //IC卡选型
        cardOptions:[],
        //RFID卡选型
        rfidOptions:[],
        // 表单参数
        form: {
          id: null,
          cardNo: null,
          rfid: null,
        },
        // 车辆备案表格数据
        preVehicleRecordList: [],
        // 表单校验
        rules: {
        }
      };
    },
    methods: {
      open() {
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.title = "绑卡";
          this.loadDetail();
        });
      },
      close() {
        this.$refs["form"].resetFields();
        this.dialogVisible = false;
      },

      // 获取详情
      loadDetail() {
        const id = this.rowData.id;
        getPreVehicleRecord(id).then((res) => {
          if (res.code == 200) {
            this.form = res.data;
          }
        });
      },

      otherProvincesRegValChange(val){
        if('1'==val){
          this.rules.veCustomsNo[0].required=true;
          this.form.vehicleType='1';
        }else{
             this.rules.veCustomsNo[0].required=false;
          if(this.dialogType == "add"){
            this.form.veCustomsNo='';
          }
        }
      },

      // 提交表单
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            let params = {
              ...this.form,
            };
            bindCard(params).then(res => {
              if (res.code === 200) {
                this.$modal.msgSuccess("操作成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          }
        });
      },
      remoteCardNoMethod(cardNo) {
        console.log("cardNo:"+cardNo);
        if (cardNo !== '') {
          findCardListByCardNo(cardNo).then(response => {
            this.cardOptions = response.rows;
          }).catch(() => {
          });
        } else {
          this.cardOptions = [];
        }
      },
      remoteRfidMethod(rfid) {
        console.log("rfid:"+rfid);
        if (rfid !== '') {
          findRfidListByRfid(rfid).then(response => {
            this.rfidOptions = response.rows;
          }).catch(() => {
          });
        } else {
          this.rfidOptions = [];
        }
      },

    },
  };
</script>

<style lang="scss" scoped></style>
